<!--工单列表item组件-->
<script setup>
import { useRouter } from 'vue-router/composables'
import LevelTag from '@/views/workOrder/components/LevelTag.vue'
import ClickBox from '@/components/ClickBox.vue'
const router = useRouter()
defineProps({
  item: {
    type: Object,
    default: null
  }
})
// 跳转到工单详情
const goDetail = (url) => {
  // 要去掉的部分
  let partToRemove = 'https://t-sentiment.ybsjyyn.com/h5/'
  let newUrl = url.replace(partToRemove, '')
  router.push(newUrl)
}
</script>

<template>
  <div
    class="item-box box-border m-t-10px mx-10px m-h-[220px] direction-column bg-white border border-solid border-[#F2F5FA] rounded-[4px]"
  >
    <ClickBox @onTap="goDetail(item.url)">
      <div class="p-10px">
        <div class="flex justify-between pt-2px mb-10px">
          <h3
            class="text-#1E2226 text-16px font-600 leading-16px m-0 flex-1 overflow-hidden whitespace-nowrap text-ellipsis"
          >
            {{ item.name }}
          </h3>
          <span class="leading-16px text-16px">
            {{ item.statusLabel }}
          </span>
        </div>
        <div v-for="ite in item.content" :key="ite.labelName" class="item-list">
          {{ ite.labelName }}：
          <level-tag
            v-if="ite.labelName === '舆情级别'"
            type="label"
            :level-label="ite.labelValue"
          />
          <span v-else>{{ ite.labelValue }}</span>
        </div>
        <div class="item-list item-footer"></div>
      </div>
    </ClickBox>
    <div class="p-15px bg-#F4F8FF">
      <div class="text-#2454B7 flex items-center text-14px font-600 gap-3px">
        <img
          alt=""
          class="box-border w-14px h-14px"
          src="@/assets/img/ic-time-blue.png"
        />
        督办进度
      </div>
      <div
        v-for="ite in item.progress"
        :key="ite.id"
        class="flex text-12px justify-between m-t-10px"
      >
        <div class="title flex-1">
          {{ ite.orgName }}
        </div>
        <div
          :style="{ color: item.status === 1 ? '#229F60' : '#545653' }"
          class="rounded-5 flex items-center text-[#54565C] gap-3px"
        >
          <img
            v-if="item.status === 1"
            alt=""
            class="flex box-border w-11px h-11px"
            src="@/assets/img/icon_successful.png"
          />
          {{
            item.status === 0 ? '待反馈' : item.status === 1 ? '已反馈' : '未知'
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.item-box {
  color: #000;

  .item-list {
    color: #71747a;
    font-size: 14px;
    margin: 10px auto;
  }

  .item-footer {
    display: flex;
    align-items: center;

    div {
      margin: 0 10px 10px 0;
      padding: 2px;
      border: 1px solid #c8c9cc;
      border-radius: 2px;
      font-size: 12px;
      color: #9da0a4;
      letter-spacing: 0;
    }

    .g-yellow {
      color: #ff8c19;
      border: 1px solid #ff8c19;
    }

    .g-blue {
      color: #2080f0;
      border: 1px solid #2080f0;
    }
  }
}
</style>
